<template>
	<view>
		<u-datetime-picker :show="show" v-model="value1" @cancel="show=false" @confirm="confirm"
			mode="date"></u-datetime-picker>
		<view class="box1">
			<image src="https://fen.fuliaoxx.com/img/new/bg.png" mode="" class="bg"></image>
			<view class="" style="position: relative;z-index: 99;display: flex;align-items: center;">
				<image src="https://fen.fuliaoxx.com/img/new/tip.png" mode=""
					style="margin-right: 14rpx;width: 30rpx;height: 30rpx;">
				</image>
				<view class="">
					我的收益
				</view>
			</view>
			<view class="" style="position: relative;z-index: 99;font-size: 46rpx;font-weight: 600;margin-top: 14rpx;">
				{{info.total_money.toFixed(2)}}
			</view>
		</view>
		<view class="box2">
			<view class="" style="position: relative;z-index: 99;display: flex;align-items: center;">
				<image src="https://fen.fuliaoxx.com/img/new/tip.png" mode=""
					style="margin-right: 14rpx;width: 30rpx;height: 30rpx;">
				</image>
				<view class="">
					数据统计
				</view>
			</view>
			<view class="items">
				<view class="item">
					<view class="" style="margin-bottom: 0rpx;font-weight: 600;font-size: 34rpx;">
						{{info.month_order_num}}
					</view>
					<view class="" style="color: #797778font-size: 22rpx;margin-top: 4rpx;">
						本月订单
					</view>
				</view>
				<view class="item">
					<view class="" style="margin-bottom: 0rpx;font-weight: 600;font-size: 34rpx;">
						￥{{info.month_money.toFixed(2)}}
					</view>
					<view class="" style="color: #797778font-size: 22rpx;margin-top: 4rpx;">
						本月收益
					</view>
				</view>
				<view class="item">
					<view class="" style="margin-bottom: 0rpx;font-weight: 600;font-size: 34rpx;">
						{{info.last_month_order_num.toFixed(2)}}
					</view>
					<view class="" style="color: #797778font-size: 22rpx;margin-top: 4rpx;">
						上月订单
					</view>
				</view>
				<view class="item">
					<view class="" style="margin-bottom: 0rpx;font-weight: 600;font-size: 34rpx;">
						￥{{info.last_month_money}}
					</view>
					<view class="" style="color: #797778font-size: 22rpx;margin-top: 4rpx;">
						上月收益
					</view>
				</view>
			</view>
		</view>
		<view class="box2">
			<view class=""
				style="position: relative;z-index: 99;display: flex;align-items: center;justify-content: space-between;">
				<view class="flex">
					<image src="https://fen.fuliaoxx.com/img/new/tip.png" mode=""
						style="margin-right: 14rpx;width: 30rpx;height: 30rpx;">
					</image>
					<view class="">
						数据统计
					</view>
				</view>
				<view class="btn" @click="show=true">
					<view class="" style="margin-right: 8rpx;">
						{{value2==today?'今日':value2}}
					</view>
					<u-icon name="arrow-down" color="#fff"></u-icon>
				</view>
			</view>
			<view class="lines" v-if="list.length==5">
				<view class="line">


					<view class=""
						style="height: 400rpx;display: flex;flex-direction: column;justify-content: flex-end;align-items: center;">
						<view class="">
							￥{{list[0].money}}
						</view>
						<view class="bor" :style="{'height':(list[0].height)+'%'  }">

						</view>
					</view>
					<view class=""
						style="margin-top: 14rpx;width: 50rpx;height: 50rpx;display: flex;justify-content: center;align-items: center;border-radius: 100px;">
						{{list[0].day}}
					</view>
				</view>
				<view class="line">


					<view class=""
						style="height: 400rpx;display: flex;flex-direction: column;justify-content: flex-end;align-items: center;">
						<view class="">
							￥{{list[1].money}}
						</view>
						<view class="bor" :style="{'height':(list[1].height)+'%'  }">

						</view>
					</view>
					<view class=""
						style="margin-top: 14rpx;width: 50rpx;height: 50rpx;display: flex;justify-content: center;align-items: center;border-radius: 100px;">
						{{list[1].day}}
					</view>
				</view>
				<view class="line">


					<view class=""
						style="height: 400rpx;display: flex;flex-direction: column;justify-content: flex-end;align-items: center;">
						<view class="">
							￥{{list[2].money}}
						</view>
						<view class="bor" :style="{'height':(list[2].height)+'%'  }">

						</view>
					</view>
					<view class=""
						style="color: white;background-color: black;margin-top: 14rpx;width: 50rpx;height: 50rpx;display: flex;justify-content: center;align-items: center;border-radius: 100px;">
						{{list[2].day}}
					</view>
				</view>
				<view class="line">


					<view class=""
						style="height: 400rpx;display: flex;flex-direction: column;justify-content: flex-end;align-items: center;">
						<view class="">
							￥{{list[3].money}}
						</view>
						<view class="bor" :style="{'height':(list[3].height)+'%'  }">

						</view>
					</view>
					<view class=""
						style="margin-top: 14rpx;width: 50rpx;height: 50rpx;display: flex;justify-content: center;align-items: center;border-radius: 100px;">
						{{list[3].day}}
					</view>
				</view>
				<view class="line">


					<view class=""
						style="height: 400rpx;display: flex;flex-direction: column;justify-content: flex-end;align-items: center;">
						<view class="">
							￥{{list[4].money}}
						</view>
						<view class="bor" :style="{'height':(list[4].height)+'%'  }">

						</view>
					</view>
					<view class=""
						style="margin-top: 14rpx;width: 50rpx;height: 50rpx;display: flex;justify-content: center;align-items: center;border-radius: 100px;">
						{{list[4].day}}
					</view>
				</view>
				<!-- 				<view class="line">


					<view class=""
						style="height: 400rpx;display: flex;flex-direction: column;justify-content: flex-end;">
						<view class="">
							￥{{list[5].money}}
						</view>
						<view class="bor" :style="{'height':(list[5].height)+'%'  }">

						</view>
					</view>
					<view class=""
						style="margin-top: 14rpx;width: 50rpx;height: 50rpx;display: flex;justify-content: center;align-items: center;border-radius: 100px;">
						{{list[5].day}}
					</view>
				</view>
				<view class="line">


					<view class=""
						style="height: 400rpx;display: flex;flex-direction: column;justify-content: flex-end;">
						<view class="">
							￥{{list[6].money}}
						</view>
						<view class="bor" :style="{'height':(list[5].height)+'%'  }">

						</view>
					</view>
					<view class=""
						style="margin-top: 14rpx;width: 50rpx;height: 50rpx;display: flex;justify-content: center;align-items: center;border-radius: 100px;">
						{{list[6].day}}
					</view>
				</view> -->
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				value1: Number(new Date()),
				value2: "",
				list: [],
				maxMoney2: 0,
				info: {
					last_month_money: 0,
					last_month_order_num: 0,
					month_money: 0,
					month_order_num: 13,
					total_money: 0
				},
				today: "",
			}
		},
		async onShow() {
			await uni.request({
				url: '/wanlshop/pay/operating',
				method: "GET",
				header: {
					isAdmin: true,
					token: uni.getStorageSync("shop_login_token")
				},
				success: res => {
					// this.info = res.data
				}
			});
		},
		async onLoad() {
			this.value2 = this.getTodayDate();
			this.today = this.getTodayDate();
			await uni.request({
				url: '/wanlshop/pay/daylist',
				method: "GET",
				data: {
					day: this.getTodayDate()
				},
				header: {
					isAdmin: true,
					token: uni.getStorageSync("shop_login_token")
				},
				success: res => {
					this.list = res.data;
					this.maxMoney2 = Math.max(...this.list.map(item => item.money));
					this.list = this.list.map(item => {
						return {
							...item,
							height: item.money == 0 ? 0 : (item.money / this.maxMoney2) * 100
						}
					})
				}
			});
		},
		methods: {
			formatTimestampToDate(timestamp) {
				// 创建Date对象（时间戳是毫秒级，可直接使用）
				const date = new Date(timestamp);

				// 获取年、月、日
				const year = date.getFullYear();
				// 月份从0开始，需要+1，并且补零确保两位数
				const month = String(date.getMonth() + 1).padStart(2, '0');
				// 日期补零确保两位数
				const day = String(date.getDate()).padStart(2, '0');

				// 拼接成xxxx-xx-xx格式
				return `${year}-${month}-${day}`;
			},
			async confirm(e) {
				console.log(e)
				this.value2 = this.formatTimestampToDate(e.value);
				await uni.request({
					url: '/wanlshop/pay/daylist',
					method: "GET",
					data: {
						day: this.value2
					},
					header: {
						isAdmin: true,
						token: uni.getStorageSync("shop_login_token")
					},
					success: res => {
						this.show = false;
						this.list = res.data;
						this.maxMoney2 = Math.max(...this.list.map(item => item.money));
						this.list = this.list.map(item => {
							return {
								...item,
								height: item.money == 0 ? 0 : (item.money / this.maxMoney2) * 100
							}
						})
					}
				});
			},
			getTodayDate() {
				const today = new Date();

				// 获取年、月、日
				const year = today.getFullYear();
				const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份补零
				const day = String(today.getDate()).padStart(2, '0'); // 日期补零

				// 返回格式化后的日期字符串
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style scoped lang="scss">
	.btn {
		display: flex;
		align-items: center;
		color: white;
		background-color: black;
		padding: 8rpx 20rpx;
		border-radius: 100px;
	}

	.box1 {
		margin: 30rpx;
		margin-top: 0;
		position: relative;
		padding: 30rpx;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.box2 {
		margin: 30rpx;
		margin-top: 0;
		position: relative;
		padding: 30rpx;
		background-color: white;
		border-radius: 30rpx;

		.items {
			display: flex;
			justify-content: space-between;
			margin-top: 12rpx;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 20rpx 0;
			}
		}

	}

	.lines {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;

		.line {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: end;
			font-size: 22rpx !important;

			.bor {
				width: 40rpx;
				background-color: #FFC400;
				height: 400rpx;
				border-radius: 10rpx 10rpx 0 0;
			}
		}
	}
</style>